<template>
  <div class="app-container">
    <!-- 地图容器，设置为相对定位 -->
    <div class="map-container" :key="componentKey">
      <!-- 地图控制按钮，相对于地图容器定位 -->
      <div class="map-controls">
        <el-button type="primary" @click="resetMap" icon="Refresh">
          重置地图
        </el-button>

        <el-button type="info" @click="toggleAreaDisplay" icon="InfoFilled" style="margin-left: 10px;">
          {{ showAreaInfo ? '隐藏信息' : '显示信息' }}
        </el-button>
        <el-button type="info" @click="reloadComponent" :loading="loading" icon="Refresh" style="margin-left: 10px;">
          重新加载
        </el-button>

      </div>
      <!-- 地图 -->
      <div id="map" style="height: 680px;"></div>
    </div>
  </div>
</template>

<script setup>
// 需要npm安装leaflet-draw,leaflet,@types/leaflet

import { ref, onMounted, onBeforeUnmount } from 'vue';
// 引入 Leaflet 核心库和样式
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
// 引入 Leaflet Draw 插件和样式
import 'leaflet-draw/dist/leaflet.draw.css';
import 'leaflet-draw';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getPlotList, addPlot, updatePlot, deletePlot } from '@/api/agriculture/guo/smartScreen/map';


// 定义响应式变量
const map = ref(null); // 存储 Leaflet 地图实例

const drawnItems = ref(null); // 存储绘制的图形
const drawControl = ref(null); // 存储绘制控件
const polygonAreas = ref([]); // 存储多边形面积信息
const showAreaInfo = ref(true); // 控制是否显示面积信息弹窗（默认显示）
const plotData = ref([]); // 存储地块数据
const loading = ref(false);
const componentKey = ref(0); // 用于强制重新渲染组件的key值
const mapInteractionTimer = ref(null); // 用于跟踪地图交互恢复的延迟定时器
const initialCenter = [36.67, 117.02]; // 地图初始中心点坐标
const initialZoom = 8; // 地图初始缩放级别

// --- 地图初始化和图层配置 ---

// 初始化地图
const initMap = () => {
  // --- 1. 定义图层 ---

  // 标准地图图层（高德）
  const standardMap = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    maxZoom: 20, // 统一最大缩放级别
    minZoom: 3,  // 统一最小缩放级别
    attribution: '高德地图' // 图层版权信息
  });

  // 卫星地图底图图层（高德）
  const satelliteBaseMap = L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    maxZoom: 20, // 统一最大缩放级别
    minZoom: 3,  // 统一最小缩放级别
    attribution: '高德地图' // 图层版权信息
  });

  // 标注图层（高德）- 包含道路名称、地名等标注信息
  const annotationLayer = L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    maxZoom: 20,
    minZoom: 3,
    attribution: '高德地图标注', // 图层版权信息
    opacity: 0.8 // 设置透明度，使标注不会完全遮挡底图
  });

  // 创建卫星地图+标注的图层组
  const satelliteMap = L.layerGroup([satelliteBaseMap, annotationLayer])

  // --- 2. 初始化地图实例 (必须在定义窗格和图层之前) ---
  // 检查是否有临时保存的地图状态（用于图层切换后恢复）
  let mapCenter = initialCenter;
  let mapZoom = initialZoom;
  let defaultLayer = satelliteMap; // 默认使用卫星地图

  if (window.tempMapState) {
    mapCenter = [window.tempMapState.center.lat, window.tempMapState.center.lng];
    mapZoom = window.tempMapState.zoom;

    // 根据保存的图层类型选择默认图层
    if (window.tempMapState.layerType === 'standard') {
      defaultLayer = standardMap;
    } else {
      defaultLayer = satelliteMap;
    }

    // 清除临时状态
    delete window.tempMapState;
  }

  // 根据选择的图层类型加载地图
  map.value = L.map('map', {
    center: mapCenter, // 地图中心点坐标（可能来自临时状态）
    zoom: mapZoom, // 初始缩放级别（可能来自临时状态）
    layers: [defaultLayer], // 根据用户选择或默认加载对应图层
    zoomControl: true, // 显示缩放控件
    attributionControl: true // 显示版权信息控件
  });

  // --- 3. 添加图层控制器 ---
  // 创建基础图层选项（卫星地图已包含标注信息）
  const baseLayers = {
    "卫星地图（含标注）": satelliteMap,
    "标准地图": standardMap
  };

  // 添加图层控制器到地图（位置设置为左下角）
  const layerControl = L.control.layers(baseLayers, null, {
    position: 'bottomleft' // 设置控制器位置为左下角
  }).addTo(map.value);

  // 监听图层切换事件，使用重新加载逻辑彻底解决缩放和中心点不一致问题
  map.value.on('baselayerchange', function (e) {
    // 保存当前的地图状态
    const currentZoom = map.value.getZoom();
    const currentCenter = map.value.getCenter();

    // 确定选中的图层类型
    let selectedLayerType = 'satellite'; // 默认卫星地图
    if (e.layer === standardMap) {
      selectedLayerType = 'standard';
    } else if (e.layer === satelliteMap) {
      selectedLayerType = 'satellite';
    }

    // 延迟执行重新加载，确保图层切换事件完成
    setTimeout(() => {
      // 临时保存当前状态到全局变量
      window.tempMapState = {
        center: currentCenter,
        zoom: currentZoom,
        layerType: selectedLayerType // 保存选中的图层类型
      };

      // 调用重新加载组件方法
      reloadComponentForLayerSwitch();
    }, 100);
  });

  // --- 6. 初始化绘制功能 ---
  initDrawControls();
};

// --- 绘制功能初始化 ---

// 初始化绘制控件
const initDrawControls = () => {
  // 设置中文提示文本
  L.drawLocal = {
    draw: {
      toolbar: {
        actions: {
          title: '取消绘制',
          text: '取消'
        },
        finish: {
          title: '完成绘制',
          text: '完成'
        },
        undo: {
          title: '删除最后绘制的点',
          text: '删除最后一个点'
        },
        buttons: {
          polyline: '绘制线条',
          polygon: '绘制多边形',
          rectangle: '绘制矩形',
          circle: '绘制圆形',
          marker: '添加标记',
          circlemarker: '添加圆形标记'
        }
      },
      handlers: {
        circle: {
          tooltip: {
            start: '点击并拖拽绘制圆形'
          },
          radius: '半径'
        },
        circlemarker: {
          tooltip: {
            start: '点击地图放置圆形标记'
          }
        },
        marker: {
          tooltip: {
            start: '点击地图放置标记'
          }
        },
        polygon: {
          tooltip: {
            start: '点击开始绘制多边形',
            cont: '点击继续绘制多边形',
            end: '点击第一个点完成绘制'
          }
        },
        polyline: {
          error: '<strong>错误:</strong> 图形边界不能相交!',
          tooltip: {
            start: '点击开始绘制线条',
            cont: '点击继续绘制线条',
            end: '点击最后一个点完成绘制'
          }
        },
        rectangle: {
          tooltip: {
            start: '点击并拖拽绘制矩形'
          }
        },
        simpleshape: {
          tooltip: {
            end: '释放鼠标完成绘制'
          }
        }
      }
    },
    edit: {
      toolbar: {
        actions: {
          save: {
            title: '保存更改',
            text: '保存'
          },
          cancel: {
            title: '取消编辑，放弃所有更改',
            text: '取消'
          },
          clearAll: {
            title: '清除所有图层',
            text: '全部清除'
          }
        },
        buttons: {
          edit: '编辑图层',
          editDisabled: '没有可编辑的图层',
          remove: '删除图层',
          removeDisabled: '没有可删除的图层'
        }
      },
      handlers: {
        edit: {
          tooltip: {
            text: '拖拽控制点或标记来编辑图形',
            subtext: '点击取消按钮撤销更改'
          }
        },
        remove: {
          tooltip: {
            text: '点击要删除的图形'
          }
        }
      }
    }
  };

  // 创建用于存储绘制图形的图层组
  drawnItems.value = new L.FeatureGroup();
  map.value.addLayer(drawnItems.value);

  // 配置绘制控件选项
  const drawControlOptions = {
    position: 'topleft', // 控件位置
    draw: {
      polyline: false, // 禁用线条绘制
      polygon: {
        allowIntersection: false, // 不允许自相交
        drawError: {
          color: '#e1e100', // 错误提示颜色
          message: '<strong>错误:</strong> 多边形边界不能相交!' // 错误提示信息
        },
        shapeOptions: {
          color: '#97009c', // 多边形边框颜色
          weight: 3, // 边框宽度
          opacity: 0.8, // 边框透明度
          fillOpacity: 0.2 // 填充透明度
        },
        // 禁用绘制过程中的面积显示以提升性能
        showArea: false, // 不在绘制过程中显示面积
        metric: true, // 使用公制单位
        feet: false, // 不使用英制单位
        // 优化绘制性能
        repeatMode: false // 禁用重复绘制模式
      },
      circle: false, // 禁用圆形绘制
      rectangle: false, // 禁用矩形绘制
      marker: false, // 禁用标记点绘制
      circlemarker: false // 禁用圆形标记绘制
    },
    edit: {
      featureGroup: drawnItems.value, // 指定可编辑的图层组
      remove: true // 允许删除
    }
  };

  // 创建绘制控件
  drawControl.value = new L.Control.Draw(drawControlOptions);
  map.value.addControl(drawControl.value);

  // 监听绘制完成事件
  map.value.on(L.Draw.Event.CREATED, onDrawCreated);
  // 监听编辑完成事件
  map.value.on(L.Draw.Event.EDITED, onDrawEdited);
  // 监听删除完成事件
  map.value.on(L.Draw.Event.DELETED, onDrawDeleted);
};

// --- 绘制事件处理函数 ---

// 处理绘制完成事件（优化版本）
const onDrawCreated = async (event) => {
  const layer = event.layer;
  const type = event.layerType;

  // 如果是多边形，计算面积
  if (type === 'polygon') {
    // 使用setTimeout避免阻塞UI线程
    setTimeout(async () => {
      const coordinates = layer.getLatLngs()[0].map(latlng => [latlng.lat, latlng.lng]);
      const area = calculatePolygonArea(layer);
      const areaInfo = {
        id: Date.now(), // 使用时间戳作为唯一ID（用于标识每个多边形，便于管理和区分）
        layer: layer,
        area: area,
        unit: area > 1000000 ? 'km²' : 'm²', // 根据面积大小选择单位
        displayArea: area > 1000000 ? (area / 1000000).toFixed(2) : area.toFixed(2),
        coordinates: coordinates,
        name: '',
        address: '',
        crop: '',
        isNew: true
      };

      // 创建可编辑的弹窗内容
      const popupContent = createEditablePopup(areaInfo, layer);

      // 绑定弹窗
      layer.bindPopup(popupContent, {
        closeButton: true,
        autoClose: false,
        closeOnClick: false,
        maxWidth: 250
      });

      // 创建地块标记
      const center = calculatePolygonCenter(areaInfo.coordinates);
      const marker = L.marker(center);

      // 绑定标记点击事件和tooltip
      marker.on('click', () => {
        if (layer && layer.getPopup()) {
          layer.openPopup();
        }
      });

      marker.bindTooltip(`地块ID: ${areaInfo.id}`, {
        permanent: false,
        direction: 'top',
        offset: [0, -10]
      });

      // 将标记添加到地图（不添加到drawnItems，避免影响编辑功能）
      map.value.addLayer(marker);

      // 保存标记引用到areaInfo
      areaInfo.marker = marker;

      // 绘制完成后默认显示弹窗
      layer.openPopup();

      // 存储面积信息
      polygonAreas.value.push(areaInfo);

      // 显示面积信息提示
      showAreaNotification(areaInfo);
    }, 0);
  }

  // 将绘制的图形添加到图层组
  drawnItems.value.addLayer(layer);
};

// 处理编辑完成事件
const onDrawEdited = async (event) => {
  const layers = event.layers;
  layers.eachLayer(async (layer) => {
    // 查找对应的面积信息并更新
    const areaInfo = polygonAreas.value.find(info => info.layer === layer);
    if (areaInfo) {
      const coordinates = layer.getLatLngs()[0].map(latlng => [latlng.lat, latlng.lng]);
      const newArea = calculatePolygonArea(layer);
      areaInfo.area = newArea;
      areaInfo.unit = newArea > 1000000 ? 'km²' : 'm²';
      areaInfo.displayArea = newArea > 1000000 ? (newArea / 1000000).toFixed(2) : newArea.toFixed(2);
      areaInfo.coordinates = coordinates;

      // 更新标记位置
      if (areaInfo.marker) {
        const newCenter = calculatePolygonCenter(coordinates);
        areaInfo.marker.setLatLng(newCenter);
      }

      // 如果图层有关联的地块数据，更新到后端
      if (layer.plotData && layer.plotData.id) {
        const updatedData = {
          ...layer.plotData,
          coordinates: coordinates,
          area: newArea,
          unit: areaInfo.unit,
          displayArea: areaInfo.displayArea
        };

        try {
          await updatePlot(updatedData);
          layer.plotData = updatedData;
          ElMessage.success('地块更新成功');

          // 更新弹窗内容
          const popupContent = createEditablePopup(areaInfo, layer);
          layer.setPopupContent(popupContent);

          // 更新标记位置和重新绑定事件
        if (areaInfo.marker) {
          const newCenter = calculatePolygonCenter(coordinates);
          areaInfo.marker.setLatLng(newCenter);
          // 更新标记的tooltip信息
          areaInfo.marker.setTooltipContent(`地块ID: ${areaInfo.id}`);
          
          // 重新绑定标记点击事件，确保编辑后标记与弹窗的关联不丢失
          areaInfo.marker.off('click'); // 移除旧的点击事件
          areaInfo.marker.on('click', () => {
            if (layer && layer.getPopup()) {
              layer.openPopup();
            }
          });
        }
        } catch (error) {
          ElMessage.error('地块更新失败');
          console.error('更新地块失败:', error);
        }
      } else {
        // 更新弹窗内容
        const popupContent = createEditablePopup(areaInfo, layer);
        layer.setPopupContent(popupContent);

        // 更新标记位置和重新绑定事件
        if (areaInfo.marker) {
          const newCenter = calculatePolygonCenter(coordinates);
          areaInfo.marker.setLatLng(newCenter);
          // 更新标记的tooltip信息
          areaInfo.marker.setTooltipContent(`地块ID: ${areaInfo.id}`);
          
          // 重新绑定标记点击事件，确保编辑后标记与弹窗的关联不丢失
          areaInfo.marker.off('click'); // 移除旧的点击事件
          areaInfo.marker.on('click', () => {
            if (layer && layer.getPopup()) {
              layer.openPopup();
            }
          });
        }
      }

      // 显示更新提示
      showAreaNotification(areaInfo, '面积已更新');
    }
  });
};

// 处理删除完成事件
const onDrawDeleted = async (event) => {
  const layers = event.layers;
  layers.eachLayer(async (layer) => {
    // 如果图层有关联的地块数据，从后端删除
    if (layer.plotData && layer.plotData.id) {
      try {
        await deletePlot(layer.plotData.id);
        ElMessage.success('地块删除成功');

        // 从本地数据中移除
        plotData.value = plotData.value.filter(plot => plot.id !== layer.plotData.id);
      } catch (error) {
        ElMessage.error('地块删除失败');
        console.error('删除地块失败:', error);
      }
    }

    // 从面积信息数组中移除对应的记录
    const index = polygonAreas.value.findIndex(info => info.layer === layer);
    if (index !== -1) {
      const areaInfo = polygonAreas.value[index];
      // 删除对应的标记
      if (areaInfo.marker && map.value.hasLayer(areaInfo.marker)) {
        map.value.removeLayer(areaInfo.marker);
      }
      polygonAreas.value.splice(index, 1);
    }
  });
};

// --- 面积计算和工具函数 ---

// 计算多边形面积（使用优化的球面几何算法）
const calculatePolygonArea = (layer) => {
  try {
    const latlngs = layer.getLatLngs()[0]; // 获取多边形的坐标点

    // 如果点数少于3个，无法构成多边形
    if (!latlngs || latlngs.length < 3) {
      return 0;
    }

    // 使用更高效的Shoelace公式计算面积
    // 先转换为平面坐标进行快速估算
    let area = 0;
    const n = latlngs.length;

    // 使用简化的球面面积计算，减少三角函数调用
    for (let i = 0; i < n; i++) {
      const j = (i + 1) % n;
      const lat1 = latlngs[i].lat;
      const lng1 = latlngs[i].lng;
      const lat2 = latlngs[j].lat;
      const lng2 = latlngs[j].lng;

      // 使用简化的球面面积公式
      area += (lng2 - lng1) * (lat1 + lat2);
    }

    // 转换为平方米（近似计算，适用于小范围区域）
    area = Math.abs(area) * 111319.9 * 111319.9 / 2;

    return area;
  } catch (error) {
    console.warn('面积计算出错:', error);
    return 0;
  }
};

// 显示面积信息通知
const showAreaNotification = (areaInfo, message = '多边形绘制完成') => {
  // 使用Element Plus的消息提示
  ElMessage({
    message: `${message}！面积: ${areaInfo.displayArea} ${areaInfo.unit}`,
    type: 'success',
    duration: 3000,
    showClose: true
  });
};







// 创建可编辑的弹窗内容（缩小版本）
const createEditablePopup = (areaInfo, layer) => {
  const uniqueId = `popup_${areaInfo.id}`;
  return `
    <div style="min-width: 220px; font-size: 12px;">
      <h4 style="margin: 3px 0; color: #333; text-align: center; font-size: 14px;">地块信息</h4>
      <div style="margin: 6px 0;">
        <label style="display: block; margin-bottom: 3px; font-weight: bold; font-size: 11px;">基地名称:</label>
        <input type="text" id="name_${uniqueId}" value="${areaInfo.name || ''}" 
               style="width: 100%; padding: 3px; border: 1px solid #ddd; border-radius: 2px; font-size: 11px;" 
               placeholder="请输入基地名称">
      </div>
      <div style="margin: 6px 0;">
        <label style="display: block; margin-bottom: 3px; font-weight: bold; font-size: 11px;">地址:</label>
        <input type="text" id="address_${uniqueId}" value="${areaInfo.address || ''}" 
               style="width: 100%; padding: 3px; border: 1px solid #ddd; border-radius: 2px; font-size: 11px;" 
               placeholder="请输入地址">
      </div>
      <div style="margin: 6px 0;">
        <label style="display: block; margin-bottom: 3px; font-weight: bold; font-size: 11px;">作物品种:</label>
        <input type="text" id="crop_${uniqueId}" value="${areaInfo.crop || ''}" 
               style="width: 100%; padding: 3px; border: 1px solid #ddd; border-radius: 2px; font-size: 11px;" 
               placeholder="请输入作物品种">
      </div>
      <div style="margin: 6px 0; text-align: center; background: #f5f5f5; padding: 4px; border-radius: 2px; font-size: 11px;">
        <strong>面积: ${areaInfo.displayArea} ${areaInfo.unit}</strong>
      </div>
      <div style="text-align: center; margin-top: 8px;">
        <button onclick="savePlotData('${uniqueId}', '${areaInfo.id}')" 
                style="background: #409EFF; color: white; border: none; padding: 4px 8px; border-radius: 2px; margin-right: 5px; cursor: pointer; font-size: 11px;">
          保存
        </button>
        <button onclick="cancelEdit('${uniqueId}')" 
                style="background: #909399; color: white; border: none; padding: 4px 8px; border-radius: 2px; cursor: pointer; font-size: 11px;">
          取消
        </button>
      </div>
      <small style="color: #666; display: block; text-align: center; margin-top: 5px; font-size: 10px;">ID: ${areaInfo.id}</small>
    </div>
  `;
};

// 计算多边形中心点
const calculatePolygonCenter = (coordinates) => {
  let latSum = 0;
  let lngSum = 0;
  const count = coordinates.length;

  coordinates.forEach(coord => {
    latSum += coord[0];
    lngSum += coord[1];
  });

  return [latSum / count, lngSum / count];
};



// 重新加载整个组件
const reloadComponent = () => {
  try {
    loading.value = true;

    // 清理现有数据
    polygonAreas.value = [];
    plotData.value = [];

    // 清理地图实例
    if (map.value) {
      map.value.remove();
      map.value = null;
    }

    // 清理绘制图层
    drawnItems.value = null;
    drawControl.value = null;

    // 强制重新渲染组件
    componentKey.value += 1;

    // 等待DOM更新后重新初始化地图
    setTimeout(() => {
      initMap();
      loadPlotData();
      ElMessage.success('组件重新加载成功');
      loading.value = false;
    }, 100);

  } catch (error) {
    ElMessage.error('组件重新加载失败');
    console.error('组件重新加载失败:', error);
    loading.value = false;
  }
};

// 专门用于图层切换的重新加载函数（不显示成功消息，不设置loading状态）
const reloadComponentForLayerSwitch = () => {
  try {
    // 清理现有数据
    polygonAreas.value = [];
    plotData.value = [];

    // 清理地图实例
    if (map.value) {
      map.value.remove();
      map.value = null;
    }

    // 清理绘制图层
    drawnItems.value = null;
    drawControl.value = null;

    // 强制重新渲染组件
    componentKey.value += 1;

    // 等待DOM更新后重新初始化地图
    setTimeout(() => {
      initMap();
      loadPlotData();
      // 图层切换时不显示成功消息，保持用户体验流畅
    }, 100);

  } catch (error) {
    console.error('图层切换重新加载失败:', error);
    // 发生错误时回退到普通重新加载
    reloadComponent();
  }
};

// 从后端加载地块数据
const loadPlotData = async () => {
  try {
    loading.value = true;
    const response = await getPlotList();
    plotData.value = response.data || [];

    // 在地图上显示已有地块
    plotData.value.forEach(plot => {
      if (plot.coordinates && plot.coordinates.length > 0) {
        const latlngs = plot.coordinates.map(coord => [coord[0], coord[1]]);
        const polygon = L.polygon(latlngs, {
          color: '#97009c',
          weight: 3,
          opacity: 0.8,
          fillOpacity: 0.2
        });

        // 关联地块数据到图层
        polygon.plotData = plot;

        const areaInfo = {
          id: plot.id,
          layer: polygon,
          area: plot.area,
          unit: plot.unit,
          displayArea: plot.displayArea,
          coordinates: plot.coordinates,
          name: plot.name || '',
          address: plot.address || '',
          crop: plot.crop || ''
        };

        const popupContent = createEditablePopup(areaInfo, polygon);
        polygon.bindPopup(popupContent, {
          closeButton: true,
          autoClose: false,
          closeOnClick: false,
          maxWidth: 250
        });

        // 创建地块标记
        const center = calculatePolygonCenter(areaInfo.coordinates);
        const marker = L.marker(center);

        // 绑定标记点击事件和tooltip
        marker.on('click', () => {
          if (polygon && polygon.getPopup()) {
            polygon.openPopup();
          }
        });

        marker.bindTooltip(`地块ID: ${areaInfo.id}`, {
          permanent: false,
          direction: 'top',
          offset: [0, -10]
        });

        // 将多边形添加到drawnItems（用于编辑和删除）
        drawnItems.value.addLayer(polygon);

        // 将标记添加到地图（不添加到drawnItems，避免影响编辑功能）
        map.value.addLayer(marker);

        // 保存标记引用到areaInfo
        areaInfo.marker = marker;
        polygonAreas.value.push(areaInfo);

        // 默认显示弹窗
        if (showAreaInfo.value) {
          polygon.openPopup();
        }
      }
    });

    ElMessage.success(`成功加载 ${plotData.value.length} 个地块`);
  } catch (error) {
    ElMessage.error('加载地块数据失败');
    console.error('加载地块数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 全局函数：保存地块数据
window.savePlotData = async (uniqueId, areaId) => {
  const nameInput = document.getElementById(`name_${uniqueId}`);
  const addressInput = document.getElementById(`address_${uniqueId}`);
  const cropInput = document.getElementById(`crop_${uniqueId}`);

  if (!nameInput || !addressInput || !cropInput) {
    ElMessage.error('获取输入数据失败');
    return;
  }

  const name = nameInput.value.trim();
  const address = addressInput.value.trim();
  const crop = cropInput.value.trim();

  if (!name) {
    ElMessage.warning('请输入基地名称');
    return;
  }

  try {
    // 查找对应的面积信息
    const areaInfo = polygonAreas.value.find(info => info.id == areaId);
    if (!areaInfo) {
      ElMessage.error('找不到对应的地块信息');
      return;
    }

    const plotDataToSave = {
      name: name,
      address: address,
      crop: crop,
      coordinates: areaInfo.coordinates,
      area: areaInfo.area,
      unit: areaInfo.unit,
      displayArea: areaInfo.displayArea
    };

    let savedPlot;
    if (areaInfo.layer.plotData && areaInfo.layer.plotData.id) {
      // 更新现有地块
      plotDataToSave.id = areaInfo.layer.plotData.id;
      savedPlot = await updatePlot(plotDataToSave);
      ElMessage.success('地块更新成功');
    } else {
      // 创建新地块
      savedPlot = await addPlot(plotDataToSave);
      ElMessage.success('地块保存成功');
      plotData.value.push(savedPlot.data);
    }

    // 更新图层关联的数据
    areaInfo.layer.plotData = savedPlot.data;
    areaInfo.name = name;
    areaInfo.address = address;
    areaInfo.crop = crop;

    // 关闭弹窗
    areaInfo.layer.closePopup();
    
    // 重新绑定标记点击事件，确保保存后标记与弹窗的关联不丢失
    if (areaInfo.marker) {
      areaInfo.marker.off('click'); // 移除旧的点击事件
      areaInfo.marker.on('click', () => {
        if (areaInfo.layer && areaInfo.layer.getPopup()) {
          areaInfo.layer.openPopup();
        }
      });
      
      // 更新标记的tooltip信息
      areaInfo.marker.setTooltipContent(`地块ID: ${areaInfo.id}`);
    }

  } catch (error) {
    ElMessage.error('保存地块失败');
    console.error('保存地块失败:', error);
  }
};

// 全局函数：取消编辑
window.cancelEdit = (uniqueId) => {
  // 查找对应的图层并关闭弹窗
  polygonAreas.value.forEach(areaInfo => {
    if (areaInfo.layer && areaInfo.layer.getPopup() && areaInfo.layer.getPopup().isOpen()) {
      areaInfo.layer.closePopup();
    }
  });
};





// --- Vue 组件生命周期钩子 ---

// 组件挂载后执行
onMounted(async () => {
  initMap(); // 初始化地图

  // 等待地图初始化完成后加载地块数据
  setTimeout(async () => {
    await loadPlotData();
  }, 1000);

  // 添加窗口大小变化监听器，确保地图在容器大小变化时能够正确重绘
  window.addEventListener('resize', () => {
    if (map.value) {
      map.value.invalidateSize();
    }
  });
});

// 重置地图到初始状态（保留绘制图层）
const resetMap = () => {
  if (map.value) {
    // 将地图中心点和缩放级别重置到初始状态
    map.value.setView(initialCenter, initialZoom, {
      animate: true, // 启用动画效果
      duration: 0.8 // 动画持续时间（秒）
    });

    // 注意：不再清除绘制的图形，保留用户绘制的多边形
    // 如果需要清除绘制图形，请使用"清除绘制"按钮
  }
};

// 切换显示/隐藏所有多边形面积信息（修复标记与弹窗脱离问题）
const toggleAreaDisplay = () => {
  if (polygonAreas.value.length === 0) {
    ElMessage({
      message: '当前没有绘制的地块',
      type: 'warning',
      duration: 2000
    });
    return;
  }

  // 切换显示状态
  showAreaInfo.value = !showAreaInfo.value;

  // 清理之前的延迟定时器，避免快速操作时的冲突
  if (mapInteractionTimer.value) {
    clearTimeout(mapInteractionTimer.value);
    mapInteractionTimer.value = null;
  }
  
  // 暂时禁用地图的自动重绘，减少闪烁
  if (map.value) {
    map.value._container.style.pointerEvents = 'none';
  }
  
  // 根据状态显示或隐藏所有多边形的弹窗
  polygonAreas.value.forEach(areaInfo => {
    if (!areaInfo.layer || !areaInfo.marker) return; // 安全检查：确保图层和标记都存在
    
    try {
      if (showAreaInfo.value) {
        // 显示弹窗逻辑
        if (areaInfo.layer.getPopup()) {
          // 如果弹窗已存在，重新绑定标记事件确保关联正确
          areaInfo.marker.off('click'); // 先移除旧的点击事件
          areaInfo.marker.on('click', () => {
            if (areaInfo.layer && areaInfo.layer.getPopup()) {
              areaInfo.layer.openPopup();
            }
          });
          
          // 确保标记的tooltip也是最新的
          areaInfo.marker.setTooltipContent(`地块ID: ${areaInfo.id}`);
          
          // 强制打开弹窗（移除状态检查，避免快速切换时的竞态条件）
          areaInfo.layer.openPopup();
        } else {
          // 如果弹窗不存在，重新创建完整的弹窗内容
          const popupContent = createEditablePopup(areaInfo, areaInfo.layer);
          
          // 重新绑定弹窗（保持原有配置）
          areaInfo.layer.bindPopup(popupContent, {
            closeButton: true,
            autoClose: false,
            closeOnClick: false,
            maxWidth: 250
          });
          
          // 重新绑定标记点击事件，确保标记与新弹窗的关联
          areaInfo.marker.off('click'); // 先移除旧的点击事件
          areaInfo.marker.on('click', () => {
            if (areaInfo.layer && areaInfo.layer.getPopup()) {
              areaInfo.layer.openPopup();
            }
          });
          
          // 确保标记的tooltip也是最新的
          areaInfo.marker.setTooltipContent(`地块ID: ${areaInfo.id}`);
          
          // 打开弹窗
          areaInfo.layer.openPopup();
        }
      } else {
        // 隐藏弹窗 - 只在弹窗打开时关闭
        if (areaInfo.layer.getPopup() && areaInfo.layer.isPopupOpen()) {
          areaInfo.layer.closePopup();
        }
      }
    } catch (error) {
      console.warn('弹窗操作失败:', error);
      // 如果出现错误，尝试重新建立标记与弹窗的关联
      if (areaInfo.marker && areaInfo.layer) {
        areaInfo.marker.off('click');
        areaInfo.marker.on('click', () => {
          if (areaInfo.layer && areaInfo.layer.getPopup()) {
            areaInfo.layer.openPopup();
          }
        });
      }
    }
  });
  
  // 延迟恢复地图交互，确保所有弹窗操作完成
  mapInteractionTimer.value = setTimeout(() => {
    if (map.value) {
      map.value._container.style.pointerEvents = 'auto';
    }
    mapInteractionTimer.value = null; // 清理定时器引用
  }, 50);

  // 显示操作提示
  ElMessage({
    message: showAreaInfo.value ? '已显示所有地块信息' : '已隐藏所有地块信息',
    type: 'success',
    duration: 1500
  });
};

// 组件卸载前执行
onBeforeUnmount(() => {
  if (map.value) {
    // 移除窗口大小变化监听器，防止内存泄漏
    window.removeEventListener('resize', () => {
      if (map.value) {
        map.value.invalidateSize();
      }
    });

    // 移除绘制相关的事件监听器
    map.value.off(L.Draw.Event.CREATED, onDrawCreated);
    map.value.off(L.Draw.Event.EDITED, onDrawEdited);
    map.value.off(L.Draw.Event.DELETED, onDrawDeleted);

    // 移除绘制控件
    if (drawControl.value) {
      map.value.removeControl(drawControl.value);
      drawControl.value = null;
    }

    // 清除绘制的图层
    if (drawnItems.value) {
      drawnItems.value.clearLayers();
      drawnItems.value = null;
    }

    // 清除面积信息
    polygonAreas.value = [];

    // 依次移除所有图层和控件，确保完全清理
    map.value.eachLayer(layer => {
      layer.remove();
    });

    // 遍历并移除所有地图控件
    // Leaflet 的 Map 实例没有 eachControl 方法，需要手动遍历 _controls 数组
    if (map.value._controls) {
      map.value._controls.forEach(control => {
        if (control.remove) {
          control.remove();
        }
      });
    }

    // 移除地图实例
    map.value.remove();
    map.value = null;
  }
});

</script>

<style scoped>
/* 移除所有可能的留白 */
.app-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 地图容器设置为相对定位，便于内部元素定位 */
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
}

/* 确保地图容器没有留白 */
#map {
  height: calc(100vh - 84px);
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

/* 重置按钮样式，相对于地图容器定位 */
.map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>